/* components/card-filter/card-filter.compoent.ts.wxss */
:host {
  display: block;
  position: relative;
  height: 2.25rem;
}

.color-danger {
  color: var(--color-danger);
}

.color-warning {
  color: var(--color-warning) !important;
}

.card-filter {
  position: absolute;
  background-color: var(--bg-main);
  width: 100%;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  z-index: 12000;

  .filter-item-list {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 2.25rem;

    .filter-item {
      display: inline-flex;
      flex-direction: row;
      padding: 0 0.5rem;
      justify-content: center;
      align-items: center;

      text {
        font-size: 0.8em;
        margin: 0 0.25rem;
      }
    }

    text.split {
      color: var(--color-h2);
    }
  }
}

.filter-panel {
  box-sizing: border-box;
  padding: 2.5rem 0.5rem 0 0.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 1px 1px 10px #ddd inset;


  .filter-group {
    width: 100%;
    padding: 0.25rem 0;
    text-align: center;
    vertical-align: top;

    .hint {
      font-size: 0.8em;
      padding-left: 0.25rem;
      text-align: left;
      font-weight: 600;
    }


    .filter-option {
      width: 100%;
      border-radius: 0.5rem;
      padding: 0.5rem 0;
      font-size: 0.7em;
      color: var(--color-dark);
      background-color: var(--bg-light);
    }

    .filter-option.selected {
      color: var(--color-danger);
      background-color: var(--bg-danger-light);
    }
  }

}

.filter-action {
  display: flex;
  flex-direction: row;
  padding: 0 0.25rem 0.25rem 0.25rem;
}


.cell {
  display: inline-block;
  padding: 0.25rem;
  float: left;
  box-sizing: border-box;
  line-height: 1rem;
  min-width: 2rem;

  text {
    padding: 0 0.25rem;
  }


  .input {
    font-size: 0.7em;
    border-radius: 0.5rem;
  }
}

.cell.size-4 {
  width: 16.66%;
}

.cell.size-f {
  width: 20%;
}

.cell.size-6 {
  width: 25%;
}

.cell.size-8 {
  width: 33.33%;
}

.cell.size-12 {
  width: 50%;
}

.cell.size-24 {
  width: 100%;
}